<!DOCTYPE html>
<html>
    <head>
        <script src="vue.js"></script>
        <script src="velocity.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="query">
            <transition-group name="item" tag="ul" @before-enter="beforeEnter" @enter="enter" @leave="leave" v-bind:css="false">
                <li v-for="(item, index) in ComputedList" :key="item.msg" :data-index="index">{{ item.msg }}</li>
            </transition-group>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data(){
                    return{
                        query:'',
                        items:[
                            {msg:'张三'},{msg:'李四'},{msg:'张芳芳'},{msg:'王琳琳'},{msg:'冯圆'}
                        ]
                    }
                },
                computed:{
                    ComputedList(){
                        var vm = this.query
                        var nameList = this.items
                        return nameList.filter(function (item){
                        return item.msg.toLowerCase() .indexOf(vm.toLowerCase()) !== -1
                       })
                    }
                },
                methods:{
                    beforeEnter(el){
                        el.style.opacity = 0;
                        el.style.height = 0;
                    },
                    enter(el,done){
                        var delay = el.dataset.index * 150
                        setTimeout(function(){
                            Velocity(el,{opacity:1, height:'1.6em'},{complete : done })
                        },delay)
                    },
                    leave(el,done){
                        var delay = el.dataset.index * 150
                        setTimeout(function(){
                            Velocity(el,{opacity:1, height:0},{complete : done })
                        },delay)
                    }
                }
            })
        </script>
    </body>
</html>